<template>
	<view class="container">
		<view class="title">转换记录</view>
		<view class="list">
			<template v-if="passwords.length > 0">
				<view class="item" v-for="(item, index) in passwords" :key="index">
					<view>{{ item }}</view>
				</view>
			</template>
			<template v-else>
				<view class="empty">暂无记录</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			passwords: []
		}
	},
	onShow() {
		console.log('onShow 执行')
		uni.getStorage({
			key: 'passwords',
			success: (res) => {
				this.passwords = Array.isArray(res.data) ? res.data : []
			},
			fail: () => {
				this.passwords = []
			}
		})
	}
}
</script>

<style scoped>
.container {
	padding: 32rpx;
}
.title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
}
.list {
	background: #f8f8f8;
	border-radius: 16rpx;
	padding: 24rpx;
}
.item {
	padding: 16rpx 0;
	border-bottom: 1rpx solid #ececec;
}
.item:last-child {
	border-bottom: none;
}
.empty {
	text-align: center;
	color: #b0b0b0;
	font-size: 32rpx;
	padding: 48rpx 0;
	letter-spacing: 4rpx;
}
</style>